<body>
    <div id='app'>
        <div>
            <h1>中奖名单</h1>
            <prize :winning='names'></prize>
            
        </div>
    </div>
    <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //定义一个局部组件
        var prize={
            props: ['winning'],
            data() {
                return {
                    text: '我是子组件prize的 text数据'
                }
            },
            template:`
            <div>
                <p>中奖人员有：</p>
              
                <ul  v-for='(v,index) in winning'>
                <li>{{v._id}}</li>
                <li>{{v.username}}</li>
                <li> {{v.password}}</li>
            </ul>
            </div>`

        }

        var app = new Vue({
            el: '#app',
            props: [],
            components: {
                prize
            },
            data:{
                names:''
            },
            // 
            created() {
                axios({
                        url: 'http://localhost:5003/httpvue',
                        methods: 'get'
                    }).then(res => {
                        
                        this.names = res.data.msg
                    })
            },
           
        });
    </script>
</body>